body{font:normal normal 12px/1.8em helvetica,arial,verdana,sans-serif;padding:0;margin:0;color:#555; background:#fff}
p{display:block}
h1,h2,h3,h4,h5,h6{font-weight:normal;margin:0;padding:10px 0;clear:both;line-height:1em}
h1{font-size:28px}
h2{font-size:24px}
h3{font-size:20px}
h4{font-size:15px;font-weight:bold}
h5{font-size:10px}
h6{font-size:8px}
a:link, a:hover{color:#444}
a:visited{color:#777}
a:hover{text-decoration:underline !important;}
hr{background-color:#444;border:0;height:1px;margin-bottom:2px;clear:both}
#outer-wrapper{text-align:left;width:100%;margin:20px auto;padding:0}
#header-wrapper{width:100%;height:auto;margin:0 auto;border:1px solid #e7e7e7; background:#fff}
#header{width:100%;height:auto}
#header h1{font-size:72px;text-align:center;font-weight:normal;font-style:italic;height:100px;width:600px;margin:20px auto}
#top-bar{text-align:center;font-size:12px;width:100%;height:40px}
#right-note{float:right;text-align:right;width:50%}
#right-note ul{float:right;margin:0;padding:0;height:auto;width:auto}
#right-note li{float:left;text-align:center;list-style:none;padding:5px 15px;text-transform:uppercase;font-size:10px}
#right-note a,#right-note a:visited{text-decoration:none}
#left-note{float:left;padding:5px 0;text-align:left;width:50%;text-transform:uppercase;font-size:10px}
#main-wrapper{float:right;width:985px;padding-top:10px;border-left:1px solid #ddd}
#main{padding:0 0 0 10px}
.post h2{font-size:25px;padding:0 0 10px 0;border-bottom:1px dotted #ddd; color:#000; font-weight:bold;}
.post{width:100%;margin-bottom:40px;float:left}
.post img{max-width:100%;height:auto;overflow:hidden;margin:10px 0;display:block}
.post blockquote{line-height:1.6em;border-left:1px solid #ddd;padding:10px;color:#828282;margin:0 20px;font-style:italic}
.post-body{width:100%;float:right;border-left:1px dotted #ddd;padding-left:10px}
.note{background:#f2f2f2;border:1px solid #ddd;padding:5px 10px}
.tiny{font-size:11px;text-transform:uppercase;float:left;width:30px;height:auto}
.tiny a{text-decoration:none}
.first-line{font-size:11px;text-transform:uppercase}
#sidebar-wrapper{float:left;width:312px;padding-top:10px}
#sidebar{padding:0 10px 0 0}
.widget{border-bottom:1px solid #ddd}
.widget h3{font-size:18px;color:#111;padding:0 0 10px 0}
.widget ul{margin:0;padding:0 0 0 10px;}
.widget li{list-style:decimal;padding:0;text-transform:capitalize}
.widget li a{list-style:decimal;padding:0;text-decoration:none}
#header{background:#fff}
.intro{padding:25px 10px; font-size:15px}
.button{padding:4px 8px; border:1px solid rgba(0, 0, 0, 0.2); border-radius:3px}
.left ol li{margin-bottom:10px}
.button1{background:#fd9f4e; border-radius:3px; color:#fff; padding:4px 8px}
.right img{max-width:100%; }
.clear{clear:both;}
pre{width:85% !important; max-width:100% !important;
background: #222!important;min-height: 17px !important; overflow:hidden; font-size:11px}
pre.prettyprint{margin:0px !important}
/* Add more */
#table-content{background:#eee; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; }
h3#toc{text-align:center; padding:0 !important}
#content-wrapper{width:1300px; margin:0 auto;}
.post-body .left{width:30%; float:left;box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; overflow:hidden}
.post-body .right{width:70%; float:right;box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; padding:10px;padding-top:30px !important; border-left:1px solid #eee}
.layoutexplain{background:#f9f9f9; padding:30px 0px;}
.layoutexplain ol{list-style:decimal}
.layoutexplain ol li{margin-bottom:15px; font-size:15px; font-weight:bold; width:45%; float:left;margin-right:10px}

.poststyle{width:100%;  box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; padding:10px; background: #eee}
.poststyle h2{font-weight:bold; text-transform:uppercase; text-align:center; font-size:30px; padding:10px 10px; color:red}
.syntax{padding:5px; background:#444; color:white; font-weight:bold; width:50%}
.color1{color:#f685bd}
.color2{color:#c9c7e7}
.color3{color:#35cb31}
.color4{color:#e9b54f}
.blue{color:#c45112; font-weight:bold}
.tbheadbox{width:100%; height:50px; background:#444; line-height:50px; color:white}
.tbheadleft{float:left;width:20%; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; padding:0px 10px; text-align:center; border-right:1px solid #eee}
.tbheadmiddle{float:left;width:30%; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; padding:0px 10px;text-align:center;border-right:1px solid #eee}
.tbheadright{float:left;width:80%; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; padding:0px 10px;text-align:center}
.tbboxcontent{width:100%; border:1px solid #eee;}
.tbboxleft{padding-top:50px !important; color:#cd4900; font-weight:bold; font-size:15px; float:left;width:20%; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; padding:3px 10px; text-align:left; }
.tbboxmiddle{float:left;width:30%; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; padding:3px 10px;text-align:left;}
.tbboxright{float:left;width:80%; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing: border-box; padding:3px 10px;text-align:left}
.hr{height:2px; background:#888; width:100%}

table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}

#sidebar-wrapper {
float: left;
width: 312px;
padding-top: 10px;
position: fixed;
top: 5px;
left: 26px;
background: #eee;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding: 15px;
}